<template>
  <div v-if="props.modal" v-show="props.modelValue" class="absolute h-full w-full bg-opacity-50 right-0 top-0 bg-black" :style="{zIndex: props.zIndex}"></div>
  <transition name="custom"
              enter-active-class="animate__animated animate__fadeInRightBig animate__faster"
              leave-active-class="animate__animated animate__fadeOutRightBig animate__faster">
    <div v-show="props.modelValue"  class="h-full absolute right-0 top-0 border-l border-gray-300" :style="{width: props.width,zIndex: props.zIndex + 1}">
      <slot></slot>
    </div>
  </transition>
</template>

<script setup lang="ts">
import {onMounted, reactive, ref, watch} from "vue";
const props = defineProps({
  title: {
    type: String,
    default: '标题'
  },
  zIndex:{
    type: Number,
    default: 1000
  },
  icon: {
    type: String
  },
  confirmText: {
    type: String,
    default: '确定'
  },
  closeText: {
    type: String,
    default: '关闭'
  },
  loading: {
    type: Boolean,
    default: false
  },
  modelValue: {
    type: Boolean,
    default: false
  },
  width: {
    type: String,
    default: "30%"
  },
  modal:{
    type: Boolean,
    default: true
  }
})

onMounted(() => {

})
</script>

<style scoped>

</style>